<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.7.1.slim.min.js"></script>
</head>
<body>
    <button id="reset">重新开始一局游戏</button><br>
    <span id="number">请输入要猜的数字:</span>
    <input type="text" id="guessNum">
    <button id="guess">猜</button><br>
    <span>已经猜的次数:</span><span id="count">0</span><br>
    <span>结果：</span><span id="result"></span>

    <script>
        // 生成一个0-100的数字
        let number = Math.floor(Math.random() * 100 + 1);
        // 计数器
        let count = 0;

        // 判断结果
        $("#guess").click(function(){
            count++;
            let guessNum = $("#guessNum").val();
            $("#count").text(count);
            if(number < guessNum){
                // 猜大了
                $("#result").text("猜大了");
                $("#result").css("color", "red");
            }else if(number > guessNum){
                // 猜小了
                $("#result").text("猜小了");
                $("#result").css("color", "red");
            }else{
                // 猜对了
                $("#result").text("猜对了");
                $("#result").css("color", "green");
            }
        });

        $("#reset").click(function(){
            let guessNum = $("#guessNum").val();
            count = 0;
            $("#result").text("");
            $("#count").text(count);
            $("#guessNum").val();
        })
    </script>
</body>
</html>